<template>
  <view class="history-query-container">
    <a-card title="历史记录查询">
      <!-- 查询表单 -->
      <a-form
        :model="formData"
        layout="inline"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 16 }"
      >
        <a-form-item label="患者名称" name="patientName">
          <a-input
            v-model:value="formData.patientName"
            placeholder="请输入患者名称"
            style="width: 200px"
          />
        </a-form-item>

        <!-- 替换为垂直排列的日期选择器 -->
        <a-form-item label="时间选择">
          <a-space direction="vertical">
            <a-range-picker
              v-model:value="formData.dateRange"
              :show-time="{ format: 'HH:mm' }"
              format="YYYY-MM-DD HH:mm"
              :placeholder="['开始时间', '结束时间']"
              @change="onRangeChange"
              @ok="onRangeOk"
            />
          </a-space>
        </a-form-item>

        <a-form-item style="margin-left: auto">
          <a-button type="primary" @click="handleQuery">查询</a-button>
        </a-form-item>
      </a-form>
    </a-card>

    <!-- 表格数据展示 -->
    <a-card style="margin-top: 20px;">
      <a-table
        :columns="columns"
        :data-source="tableData"
        row-key="id"
        :scroll="{ x: 800 }"
        bordered
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <a-button type="link" size="small">查看详情</a-button>
            <a-button type="link" size="small">导出数据</a-button>
          </template>
        </template>
      </a-table>
    </a-card>
  </view>
</template>

<script setup>
import { reactive, ref } from "vue";

// 表单数据
const formData = reactive({
  patientName: "",
  // 日期范围选择
  dateRange: null,
  // 保留原有的开始/结束时间用于查询
  startTime: null,
  endTime: null,
});

// 表格列配置
const columns = [
  {
    title: "患者姓名",
    dataIndex: "patientName",
    key: "patientName",
    width: 120,
  },
  {
    title: "监测时间",
    dataIndex: "monitorTime",
    key: "monitorTime",
    width: 180,
  },
  {
    title: "最高压力值",
    dataIndex: "maxPressure",
    key: "maxPressure",
    width: 100,
  },
  {
    title: "最低压力值",
    dataIndex: "minPressure",
    key: "minPressure",
    width: 100,
  },
  {
    title: "平均压力值",
    dataIndex: "avgPressure",
    key: "avgPressure",
    width: 100,
  },
  {
    title: "记录时长",
    dataIndex: "recordDuration",
    key: "recordDuration",
    width: 100,
  },
  {
    title: "设备编号",
    dataIndex: "deviceId",
    key: "deviceId",
    width: 120,
  },
  {
    title: "操作",
    key: "action",
    width: 150,
  },
];

// 表格数据（写死的数据）
const tableData = ref([
  {
    id: 1,
    patientName: "张三",
    monitorTime: "2023-10-01 14:30:00",
    maxPressure: 25,
    minPressure: 12,
    avgPressure: 18.5,
    recordDuration: "30分钟",
    deviceId: "DEV-2023001",
  },
  {
    id: 2,
    patientName: "李四",
    monitorTime: "2023-10-02 09:15:00",
    maxPressure: 30,
    minPressure: 15,
    avgPressure: 21.2,
    recordDuration: "45分钟",
    deviceId: "DEV-2023002",
  },
  {
    id: 3,
    patientName: "王五",
    monitorTime: "2023-10-03 16:20:00",
    maxPressure: 22,
    minPressure: 10,
    avgPressure: 16.8,
    recordDuration: "60分钟",
    deviceId: "DEV-2023003",
  },
  {
    id: 4,
    patientName: "赵六",
    monitorTime: "2023-10-04 11:45:00",
    maxPressure: 28,
    minPressure: 14,
    avgPressure: 19.7,
    recordDuration: "35分钟",
    deviceId: "DEV-2023001",
  },
  {
    id: 5,
    patientName: "张三",
    monitorTime: "2023-10-05 10:00:00",
    maxPressure: 26,
    minPressure: 13,
    avgPressure: 17.9,
    recordDuration: "50分钟",
    deviceId: "DEV-2023004",
  },
]);

// 范围选择变化事件
const onRangeChange = (dates, dateStrings) => {
  console.log("范围选择变化:", dates, dateStrings);
  if (dates) {
    formData.startTime = dates[0];
    formData.endTime = dates[1];
    formData.singleDate = null; // 清除单个日期选择
  }
};

// 范围选择确认事件
const onRangeOk = (dates) => {
  console.log("范围选择确认:", dates);
};

// 查询处理函数
const handleQuery = () => {
  console.log("查询条件:", {
    patientName: formData.patientName,
    startTime: formData.startTime,
    endTime: formData.endTime,
  });
  // 实际查询逻辑保持不变
};
</script>

<style scoped>
/* 保持原有样式不变，添加以下补充样式 */
.ant-space-vertical {
  width: 100% !important;
}

/* 调整表单项间距 */
.a-form-item {
  margin-right: 16px;
}

.history-query-container {
  padding: 20px;
  /* background-color: #f5f5f5; */
  min-height: 100vh;
}

.title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}

.query-form {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.result-table {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .history-query-container {
    padding: 10px;
  }

  .query-form {
    padding: 15px;
  }

  .a-form-item {
    margin-bottom: 10px;
  }
}
</style>
